<template>
    <div id="Recommend">
        <div class="recommend_top">
            <div class="header">
                <img class="return_img" src="@/assets/Return2.png" style="width:.23rem;height:.4rem;" v-on:click="back()">
                邀请有礼
            </div>
            <div class="recommend_top_content">
                <box>
                    <x-button @click.native="onItemClick">立即赚现金</x-button>    
                </box>  
            </div>
             <div class="recommend_bottom">
            <h3 style="margin-bottom:.1rem">个人成绩</h3>
            <div class="class">
                <img class="left" src="@/assets/personal1.png" alt="" style="width:.68rem;align-items: center;height:.68rem;margin-top:.12rem">
                <div class="left class_cont">我邀请的会员</div>
                <div class="text left">{{ OrderList.number }}人</div>
                    <div class="badge-value">
                    <div class="badge-value" @click="Member">
                      <a class="right">
                        <span class="vertical-middle">邀请关系</span>
                        <img src="@/assets/right.png" alt="" style="width:.15rem;margin-bottom:.055rem;">
                      </a>
                    </div>
                </div>
            </div>
            <div class="class">
                <img class="left" src="@/assets/personal2.png" alt="" style="width:.68rem;align-items: center;height:.68rem;margin-top:.12rem">
                <div class="left class_cont">累计收益</div>
                <div class="text left">￥{{ OrderList.sumProfit }}</div>
                    <div class="badge-value">
                    <router-link class="right" to="/my/recommend/Record">
                        <span class="vertical-middle">查看记录 <img src="@/assets/right.png" alt="" style="width:.15rem;margin-bottom:.055rem;"></span>
                    </router-link>                    
                </div>
            </div>
            <div class="class" style="border:none">
                <img class="left" src="@/assets/personal3.png" alt="" style="width:.68rem;align-items: center;height:.68rem;margin-top:.2rem">
                <div class="left class_cont">剩余收益</div>
                <div class="text left">￥{{ OrderList.profit }}</div>
                <div class="badge-value" @click="request">
                    <a class="right tx_btn" style="margin-top:.22rem;">
                      <span class="vertical-middle">立即提现</span> </a>
                </div>
            </div>
        </div>                                         
        </div>
        <div v-transfer-dom>
          <x-dialog v-model="showDialogStyle" hide-on-blur :dialog-style="{'max-width': '100%', width: '100%', height: '100%', 'background-color': 'transparent'}">
            <div style="color:#fff;text-align:center;height:100%;" @click="showDialogStyle = false">
              <div class="content">
                  <p  class="tishi"><img src="@/assets/tishi.png" alt="" style="width:3rem"></p>
                  <p style="font-size:.48rem">请点击右上角分享</p>
              </div>
            </div>
          </x-dialog>
        </div>
    </div>
</template>
<script>
import {
  XHeader,
  XButton,
  Box,
  Badge,
  Group,
  Cell,
  Popup,
  Checker,
  CheckerItem,
  TransferDomDirective as TransferDom,
  XDialog
} from "vux";
import {
  getReserveOrder,
  getPriceAgreement,
  getPersonalInfo
} from "@/service/home.js";
import AxiosIns from "@/service/axiosConfig.js";
import axios from "axios";
import wx from "weixin-js-sdk";

export default {
  directives: {
    TransferDom
  },
  components: {
    XHeader,
    XButton,
    Box,
    Badge,
    Group,
    Cell,
    Popup,
    Checker,
    CheckerItem,
    XDialog
  },
  data() {
    return {
      userInfo: "",
      id: "",
      OrderList: "",
      showPopup: false,
      demo4: "111",
      value1: "",
      value2: "",
      token: "",
      iosToken: "",
      showDialogStyle: false,
      name: "",
      flg: true,
      android: true, //区分安卓入口字段
      IOS: true, //区分ios入口字段
      iosToken_flg: true
    };
  },
  created() {
    this.token = this.$route.query.token;
    this.iosToken = this.$route.query.iosToken;
    if (this.token) {
      sessionStorage.setItem("token", this.token);
    }
    if (this.iosToken) {
      sessionStorage.setItem("token", this.iosToken);
    }
    this._setToken();
    this._getReserveOrder();
    this._getPersonalInfo();
  },
  mounted() {},
  methods: {
    _setToken() {
      if (this.token) {
        sessionStorage.setItem("android", this.android);
        AxiosIns.defaults.params.token = this.token;
      }
      if (this.iosToken) {
        sessionStorage.setItem("IOS", this.IOS);
        AxiosIns.defaults.params.token = this.iosToken;
      }
    },
    //获取用户个人信息
    _getPersonalInfo() {
      getPersonalInfo().then(res => {
        this.userInfo = res.data.userInfo;
        localStorage.setItem("userInfo", JSON.stringify(this.userInfo));
        this.name = this.userInfo.name;
        this.id = this.userInfo.id;
        this.wechat();
      });
    },
    _getReserveOrder() {
      getReserveOrder().then(res => {
        if (res.data.errCode == 10001) {
          this.token ? window.android.logout() : this.$router.push("/login");
          this.iosToken ? loginWebAction() : this.$router.push("/login");
          return false;
        }
        this.OrderList = res.data;
        localStorage.setItem("number", this.OrderList.number);
      });
    },
    wechat() {
      var url = window.location.href;
      axios.post("/recommend/getPriceAgreement?url=" + url).then(res => {
        //console.log(res);
        let links = "http://staff.ihotelvip.com/my/QrCode?id=" + this.id; //分享出去的链接
        let title = "送你一个住酒店福利，限前1000位领取。"; //分享的标题
        let desc = `邀请您成为长沙兴威华天大酒店会员，自己住店立减60元！推荐朋友入住最高可得50元！`; //分享的详情介绍
        let imgUrl = "http://img.ihotelvip.com/1544419746942";
        wx.config({
          debug: false,
          appId: "wx9a16008c72a9cf50",
          timestamp: res.data.timestamp,
          nonceStr: res.data.nonceStr,
          signature: res.data.qm,
          jsApiList: [
            "onMenuShareTimeline",
            "onMenuShareAppMessage",
            "onMenuShareQQ",
            "onMenuShareWeibo"
          ]
        });
        //直接调用
        wx.ready(function() {
          //分享给好友
          wx.onMenuShareAppMessage({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: links, // 分享链接
            imgUrl: imgUrl, // 分享图标
            success: function() {
              // 分享纪录
              alert("成功分享给朋友");
            },
            cancel: function() {
              alert("分享失败,您取消了分享!");
            }
          });
          wx.onMenuShareTimeline({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: links, // 分享链接
            imgUrl: imgUrl, // 分享图标
            success: function() {
              // 分享纪录
              alert("成功分享给朋友");
            },
            cancel: function() {
              alert("分享失败,您取消了分享!");
            }
          });
          wx.onMenuShareQQ({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: links, // 分享链接
            imgUrl: imgUrl, // 分享图标
            success: function() {
              // 分享纪录
              alert("成功分享给朋友");
            },
            cancel: function() {
              alert("分享失败,您取消了分享!");
            }
          });
          wx.onMenuShareWeibo({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: links, // 分享链接
            imgUrl: imgUrl, // 分享图标
            success: function() {
              // 分享纪录
              alert("成功分享给朋友");
              //logUtil.printLog("分享给朋友成功返回的信息为:",res);
            },
            cancel: function() {
              alert("分享失败,您取消了分享!");
            }
          });
        });
        //失败回调
        wx.error(function(res) {
          // alert("失败");
        });
      });
    },
    onItemClick() {
      let token = this.$route.query.token;
      let iosToken = this.$route.query.iosToken;
      if (token) {
        //调用安卓方法分享
        window.android.shareWX(
          "送你一个住酒店福利，限前1000位领取。",
          "http://staff.ihotelvip.com/my/QrCode?id=" + this.id,
          `邀请您成为长沙兴威华天大酒店会员，自己住店立减60元！推荐朋友入住最高可得50元！`
        );
        return false;
      } else if (iosToken) {
        //调用ios方法分享
        sharedAction(
          "送你一个住酒店福利，限前1000位领取。",
          "http://staff.ihotelvip.com/my/QrCode?id=" + this.id,
          `邀请您成为长沙兴威华天大酒店会员，自己住店立减60元！推荐朋友入住最高可得50元！`
        );
        return false;
      } else {
        this.showDialogStyle = true;
      }
    },
    request() {
      //如果有授权
      if (this.userInfo.openId) {
        // sessionStorage.setItem("android", this.android);
        this.$router.push("/my/CashWithdrawal");
      } else {
        this.$router.push("/my/code");
      }
      if (this.token) {
        sessionStorage.setItem("android", this.android);
        if (this.userInfo.openId) {
          this.$router.push("/my/CashWithdrawal");
        } else {
          alert("请从微信公众号授权");
          return false;
        }
      }
    },
    Member() {
      if (this.token) {
        localStorage.setItem("flg", this.flg);
      }
      if (this.iosToken) {
        localStorage.setItem("iosToken_flg", this.iosToken_flg);
      }
      // this.$router.push("/my/recommend/Member");
      window.location.href = "/my/recommend/Member";
    },
    back() {
      //this.$router.go(-1); //返回上一层
      let token = this.$route.query.token;
      let iosToken = this.$route.query.iosToken;
      if (token) {
        window.android.goBack();
      } else if (iosToken) {
        returnAction();
      } else {
        this.$router.push({ path: "/index" });
      }
    }
  }
};
</script>
<style scoped lang="less">
#Recommend {
  background: #fff;
  .recommend_top {
    background: url(../../assets/recommend_bj.png) no-repeat;
    background-size: 100%;
    height: 13.34rem;
    color: #fff;
    .header {
      background: none;
      color: #fff;
    }
    .recommend_top_content {
      width: 92%;
      margin: 0 auto;
      margin-top: 7.5rem;
      margin-bottom: 0.58rem;
    }
    .recommend_top_user {
      width: 95%;
      margin: 1.8rem auto 0;
      background: url(../../assets/recommend_bj2.png) no-repeat;
      background-size: 100%;
      height: 10.1rem;
      padding-top: 1.86rem;
      h3 {
        text-align: center;
        font-size: 0.36rem;
        color: #b56e2e;
        line-height: 0.36rem;
        margin-bottom: 0.3rem;
      }
      ul {
        background: url(../../assets/recommend_rectangle.png) no-repeat;
        background-size: 100%;
        height: 4.74rem;
        width: 86%;
        margin: 0.3rem auto 0;
        padding: 0.45rem 0;
        li {
          text-align: center;
          margin-bottom: 0.4rem;
          p {
            font-size: 0.3rem;
            margin-bottom: 0.1rem;
          }
          span {
            font-size: 0.24rem;
            em {
              color: #ffe358;
            }
          }
        }
      }
      button {
        width: 86%;
        margin: 1.66rem auto 0;
        background: #8239d1;
      }
    }
  }
  .recommend_bottom {
    width: 95%;
    margin: 0 auto;
    h3 {
      text-align: center;
      background: url(../../assets/recommend_lr.png) no-repeat;
      background-size: 100%;
      line-height: 0.34rem;
      font-size: 0.36rem;
      color: #4e4e4e;
    }
    .class {
      background-size: 0.68rem;
      font-size: 0.3rem;
      color: #4e4e4e;
      line-height: 1rem;
      overflow: hidden;
      border-bottom: 1px solid #f3f3f3;
      div {
        line-height: 1rem;
      }
      .class_cont {
        margin: 0 0.36rem 0 0.2rem;
      }
      .text {
        color: red;
      }
      .badge-value {
        a {
          color: #8239d1;
          font-size: 0.3rem;
        }
      }
      .tx_btn {
        width: 1.6rem;
        height: 0.6rem;
        line-height: 0.6rem;
        background: #8239d1;
        border-radius: 0.3rem;
        color: #fff !important;
        text-align: center;
      }
    }
  }
}
.vux-tap-active {
  text-align: center;
  color: #000000;
}
.vux-header-title {
  font-size: 18px !important;
}
.v-transfer-dom {
  .content {
    font-size: 0.3rem;
    p {
      margin-bottom: 0.25rem;
    }
    .tishi {
      width: 100%;
      overflow: hidden;
      img {
        float: right;
        margin-right: 0.5rem;
      }
    }
  }
}
</style>
